<template>
  <div>
    <!-- 顶部 -->
    <van-nav-bar
    fixed
    title="用户昵称"
    left-text="返回"
    left-arrow>
    <template #right>
    <van-icon name="ellipsis" size="18" />
    </template>
  </van-nav-bar>
  <!-- 聊天记录框 -->
    <div class="w_chat"  :class="showEmo&&'showEmoUp'">
      <van-list immediate-check v-model="loading" finished>
        <van-cell v-for="(item,index) in chatmsg" :key="index">
          <div :class="index%2==1?'diolog':'Mymsg'" style="padding:5px">
            <!-- 头像 -->
            <div class="user-icon">
              <img src="/images/bg.jpg" alt="">
            </div>
            <!-- 聊天信息 -->
            <div class="tran"></div>
            <div class="msg">
              {{item}}
            </div>
          </div>
        </van-cell>
      </van-list>
    </div>
    <!-- 底边栏 -->
      <van-tabbar v-model="active" :class="showEmo&&'showEmo'">
        <van-cell-group>
          <van-field v-model="msg" placeholder="请输入需要发送的消息" border @keyup.13="sendMsg"/>
        </van-cell-group>
        <van-tabbar-item id="emoji"  @click.native.capture="emoSwitch"><van-icon name="smile" size="30" /></van-tabbar-item>
        <van-tabbar-item v-show="msg==''" id="menu"><van-icon name="add" size="30"/></van-tabbar-item>
        <van-tabbar-item v-show="msg!=''" style="margin-top:0;">
          <van-button type="info" size="small" @click="sendMsg">发送</van-button>
        </van-tabbar-item>
        
      </van-tabbar>
      <Emoji v-if="showEmo"></Emoji>
      <!-- <UploadFile v-if="!showEmo"></UploadFile> -->
        </div>
</template>

<script>
import Emoji from '../components/Emoji.vue'
import UploadFile from '../components/UploadFile.vue';
import socket from '../untils/socket'
  export default {
  components: { Emoji, UploadFile },
    data() {
      return {
        msg:'',
        active:'',
        loading:true,
        chatmsg:[],
        showEmo:false
      }
    },
    methods: {
      // 是否显示表情列表
      emoSwitch(){
        if(this.showEmo){
          this.showEmo = false;
        }else{
          this.showEmo = true;
        }
      },
      // 发送消息
    sendMsg(){
      socket.emit('sendMsg',{user:'match',msg:this.msg});
      // console.log('已经发送了登录消息')
      this.chatmsg.push(this.msg);
      this.msg='';
    }
    },
    
  }
</script>

<style lang="scss" scoped>
.w_chat{
  height: 87%;
  background-color: #ededed;
  // margin-top: 46px;
  top:40px;
  overflow: scroll;
  position: fixed;
  width: 100%;
  bottom: 10px;
}
.van-cell-group{
  width: 280px;
}
.user-icon{
  display: inline-block;
  width: 50px;
  height: 50px;
  >img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    // display: block;
    vertical-align: middle;
  }
}
.tran{
    height: 0px;
    width: 0px;
    display: inline-block;
    border-width: 5px;
    border-style: solid;
  	border-color:transparent lightblue transparent transparent;
    position: relative;
    top:16px;
  }
.msg{
  font-family: "微软雅黑";
  display: inline-block;
  max-width: 50%;
  min-width: 10%;
  line-height: 40px;
  background-color: lightblue;
  border-radius: 5px;
  font-size: 16px;
  position: relative;
  top:8px;  
  padding:3px;
  margin-bottom: 4px;
}
.van-cell::after {
  border-bottom: 0px solid transparent;
}
.diolog{
  display: flex;
}
.Mymsg{
  display: flex;
  flex-direction: row-reverse;
  .tran{
    	border-color:transparent transparent transparent lightblue;
  }
}
.showEmo{
      margin-bottom: 63px;
}
.showEmoUp{
  height: 78%;
}
.van-cell{
  background-color: transparent;
}
</style>